<template>
<view>
<!--pages/topicality/xiaofeiquan/xiaofeiquan.wxml-->
<!--<import src="../../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view>
  <!--  -->
  <image src="http://imgbdb3.bendibao.com/xcx/20206/19/2020619164723_78565.jpg" class="main-img">
    <view class="city-box">
      <text>{{city}}</text>
      <!-- <image src="/images/dwicon.png"></image> -->
    </view>
    <view class="change-city">
      <view style="display: flex;align-items: center;">
        <text style="margin-left: 30rpx;">切换城市:</text>
        <picker @change="bindProv" :value="pindex" :range="provPick">
          <view class="sel-city">
            <view class="picker">
              {{provPick[pindex]}}
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
        <picker @change="bindCity" :value="cindex" :range="cityPick">
          <view class="sel-city">
            <view class="picker">
              {{cityPick[cindex]}}
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
        <picker @change="bindQu" :value="qindex" :range="quPick">
          <view class="sel-city">
            <view class="picker">
              {{quPick[qindex]}}
            </view>
            <image src="/static/images/dwicon.png"></image>
          </view>
        </picker>
      </view>
      <view class="search">
        <view class="search-box">
          <input placeholder="请选择区域或输入小区/场所" placeholder-style="color:#A7A6A6;font-size:25rpx;" :value="quValue" @confirm="searchQu" @input="inputQu">
        </view>
        <view class="chaxun" @tap="searchBtn">查询</view>
      </view>
      <view class="renew">当前页面更新时间：{{updateTime}}时</view>
    </view>
  </image>

  <!-- 内容 -->
  <view class="yq-content">
    <!-- 正常数据显示 -->
    <view v-if="showNomal">
      <view class="fb-title">
        <view :class="showTitle1?'titleSel1':'titleNor1'" @tap="bindClick" data-flag="1">患者到访小区分布图</view>
        <view :class="showTitle2?'titleSel2':'titleNor2'" @tap="bindClick" data-flag="2">确诊病例区域分布图</view>
      </view>
      <!-- 患者到访小区分布图 -->
      <view class="fb-content1" v-if="showTitle1">
        <map id="myMap" class="mapstyle" scale="10" :latitude="latitude" :longitude="longitude" :markers="markers" show-location></map>
        <view class="menzhen" v-if="infoData.menzhen" @tap="navDeatil" :data-id="infoData.menzhen[0].id" :data-url="infoData.menzhen[0].url" :data-type="infoData.menzhen[0].type" :data-citycode="infoData.menzhen[0].citycode">发热门诊点位一览</view>
        <view class="main-content" v-if="realTimeData!=''">
          <view class="sstext">实时新增</view>
          <view class="realtime-box">
            <view v-for="(item, index) in realTimeData" :key="index" :class="showReal?'realShow':''">
              <view class="real-box">
                <image src="/static/images/sys/bluedot.png"></image>
                <text>{{item.update_at}}</text>
              </view>
              <view class="real-box2" @tap="navDeatil" :data-id="item.id" :data-url="item.url" :data-type="item.type" :data-citycode="item.citycode" :data-title="item.title">
                <image src="/static/images/sys/shuline.png"></image>
                <view class="cont-text">{{item.title}}</view>
              </view>
            </view>
            <!-- 查看更多 -->
            <view class="see-more" @tap="seemoreBtn" data-flag="1" v-if="showReal && realTimeData.length>2">
              <view>查看全部</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 确诊病例区域分布图 -->
      <view class="fb-content2" v-if="showTitle2">
        <view style="margin:0 30rpx;">
          <view v-if="infoData.img">
            <swiper indicator-dots="true" autoplay="true" indicator-color="#CCCCCC" indicator-active-color="#959595" circular="true" style="height:530rpx;">
              <block v-for="(item, index) in infoData.img" :key="index">
                <swiper-item>
                  <image :src="item" class="lunbo"></image>
                </swiper-item>
              </block>
            </swiper>
          </view>
          <view v-for="(info, index) in infoData.xiaoqu" :key="index" class="xiaoqu-box">
            <view class="qu-box" @tap="quClickBtn" :data-quname="info.quname" data-flag="1">
              <view class="qu-text">{{info.quname}}</view>
              <view class="qu-sel">
                <text>{{info.count}}处</text>
                <image :src="info.quClick?'/static/images/sys/shang.png':'/static/images/sys/xia.png'"></image>
              </view>
            </view>
            <view class="qu-item-box" v-if="info.quClick" @tap="info.citycode?'navDeatil':''" :data-id="info.id" :data-type="info.type" :data-url="info.url" :data-citycode="info.citycode">
              <view v-for="(item, index2) in info.xq" :key="index2" class="qu-item">
                <text>{{item.xq}}</text>
                <image src="/static/images/sys/right.png" v-if="index==0 && info.citycode"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="main-content" v-if="guijiData">
          <view class="sstext">病例轨迹</view>
          <view class="realtime-box">
            <view v-for="(item, index) in guijiData" :key="index" :class="showGuiji?'realShow':''">
              <view class="real-box">
                <image src="/static/images/sys/bluedot.png"></image>
                <text>{{item.update_at}}</text>
              </view>
              <view class="real-box2" @tap="navDeatil" :data-id="item.id" :data-url="item.url" :data-type="item.type" :data-citycode="item.citycode" :data-title="item.title">
                <image src="/static/images/sys/shuline.png"></image>
                <view class="cont-text">{{item.title}}</view>
              </view>
            </view>
            <!-- 查看更多 -->
            <view class="see-more" @tap="seemoreBtn" data-flag="2" v-if="showGuiji && guijiData.length>2">
              <view>查看全部</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 搜索结果 -->
    <view v-else class="result-box">
      <view class="sstext" v-if="quValue">“{{quValue}}”查询结果</view>
      <view v-if="searchRes!=''">
        <map id="myMap" class="mapstyle" scale="10" :latitude="latitude" :longitude="longitude" :markers="resMarkers" show-location v-if="resMarkers!=''" style="margin-top:30rpx;"></map>
        <view v-for="(info, index) in quCont" :key="index" class="xiaoqu-box" style="margin-top:30rpx;" v-if="quCont!=''">
          <view class="qu-box" @tap="quClickBtn" :data-quname="info.qu" data-flag="2">
            <view class="qu-text">{{info.qu}}</view>
            <view class="qu-sel">
              <text>{{info.xq.length}}处</text>
              <image :src="info.quClick?'/static/images/sys/shang.png':'/static/images/sys/xia.png'"></image>
            </view>
          </view>
          <view class="qu-item-box" v-if="info.quClick" @tap="info.citycode?'navDeatil':''" :data-id="info.id" :data-type="info.type" :data-url="info.url" :data-citycode="info.citycode">
            <view v-for="(item, index2) in info.xq" :key="index2" class="qu-item">
              <text>{{item.address}}</text>
              <image src="/static/images/sys/right.png" v-if="index==0 && info.citycode"></image>
            </view>
          </view>
        </view>
      </view>
      <view class="nores" v-if="searchRes==''">未找到患者到访点位信息</view>
      <view class="main-content">
        <view class="sstext">病例轨迹</view>
        <view class="realtime-box">
          <view v-for="(item, index) in guijiData" :key="index" :class="showGuiji?'realShow':''">
            <view class="real-box">
              <image src="/static/images/sys/bluedot.png"></image>
              <text>{{item.update_at}}</text>
            </view>
            <view class="real-box2" @tap="navDeatil" :data-id="item.id" :data-url="item.url" :data-type="item.type" :data-citycode="item.citycode" :data-title="item.title">
              <image src="/static/images/sys/shuline.png"></image>
              <view class="cont-text">{{item.title}}</view>
            </view>
          </view>
          <!-- 查看更多 -->
          <view class="see-more" @tap="seemoreBtn" data-flag="2" v-if="showGuiji && guijiData.length>2">
            <view>查看全部</view>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 导粉 -->
  <view class="daofen" v-if="infoData.daofen">
    <rich-text :nodes="infoData.daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>

</view>
<!-- 快捷导航 -->
<fastnav :qrcodeimg="qrcodeimg" :citycode="citycode" :showNav="showNav" :showShare="showShare"></fastnav>
</view>
</template>

<script>
// pages/topicality/xiaofeiquan/xiaofeiquan.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fastnav from "../../../component/fastnav/fastnav";

export default {
  data() {
    return {
      citycode: "bj",
      city: '北京',
      province: '北京',
      pindex: 0,
      cindex: 0,
      qindex: 0,
      // cityPick: ["选择城市"],
      quPick: ["全市"],
      showtk: false,
      showNav: true,
      // 快捷导航是否展开
      showShare: true,
      // 显示分享按钮
      showTitle1: true,
      // 患者到访小区分布图 显示
      showTitle2: false,
      // 确诊病例区域分布图 显示
      longitude: 116.38926392898001,
      //默认定位经度
      latitude: 39.923697898213106,
      //默认定位纬度
      markers: [],
      realTimeData: [],
      // 实时新增数据
      showReal: false,
      // 查看全部实时新增
      guijiData: [],
      // 病例轨迹数据
      showGuiji: false,
      // 查看全部病例轨迹数据
      resMarkers: [],
      showNomal: true,
      provPick: [],
      cityPick: [],
      quValue: "",
      updateTime: "",
      quCont: "",
      searchRes: "",
      qrcodeimg: "",
      cityArray: "",
      citylist: "",
      quData: "",
      infoData: "",
      marketData: ""
    };
  },

  components: {
    fastnav
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(res => {
      this.getProvinceData(options.city);
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.infoData ? this.infoData.title : "新冠肺炎患者分布小区查询"
    };
  },
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: this.infoData ? this.infoData.title : "新冠肺炎患者分布小区查询",
      imageUrl: "http://imgbdb3.bendibao.com/xcx/20206/19/2020619164723_78565.jpg",
      query: {
        city: this.citycode
      }
    };
  },
  methods: {
    // 定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city; // let city="芜湖市";

          let citydata = this.citylist.filter(v => {
            if (city.indexOf(v.cityname) != -1) {
              return v;
            }
          });

          if (citydata != '' && city.indexOf(this.city) == -1) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '新冠肺炎患者分布小区查询？',
              success: res => {
                if (res.confirm) {
                  this.setData({
                    city: Array.isArray(citydata) ? citydata[0].cityname : this.city,
                    citycode: Array.isArray(citydata) ? citydata[0].citycode : this.citycode,
                    province: Array.isArray(citydata) ? citydata[0].province : this.province,
                    // cityPick: ["选择城市"]
                    cindex: 0
                  });
                  let clist = [];
                  this.provPick.forEach((v, k) => {
                    if (v == this.province) {
                      this.setData({
                        pindex: k
                      });
                    }
                  });
                  this.cityArray[this.pindex].citylist.forEach(v => {
                    clist.push(v.cityname);
                  });
                  this.setData({
                    // cityPick: this.data.cityPick.concat(clist)
                    cityPick: clist
                  });
                  this.cityPick.forEach((v, k) => {
                    if (v == this.city) {
                      this.setData({
                        cindex: k
                      });
                    }
                  }); // 获取城市公众号二维码

                  this.getQrcode(this.citycode);
                  this.getInfoData(this.citycode);
                }
              }
            });
          }
        }
      });
    },

    // 获取城市公众号二维码
    getQrcode(citycode) {
      util.cityConfig(citycode).then(res => {
        this.setData({
          qrcodeimg: res.qrcode
        });
      });
    },

    // 获取有疫情等级的城市
    getProvinceData(optcode) {
      let data = {
        action: 'xiaoqu',
        type: "city"
      };
      util.request('zhuanti.php', data).then(res => {
        this.setData({
          cityArray: res.data.data.city
        });
        let provPick = [];
        let citylist = [];
        let clist = [];
        this.cityArray.forEach(v => {
          v.citylist.forEach(v => {
            citylist.push(v);
          });
          provPick.push(v.province);
          this.setData({
            provPick,
            citylist
          });
        });

        if (this.citylist) {
          this.citylist.forEach((v, k) => {
            if (optcode == v.citycode) {
              this.setData({
                citycode: v.citycode,
                city: v.cityname,
                province: v.province
              });
            } else {
              this.setData({
                citycode: this.citycode,
                city: this.city,
                province: this.province
              });
            }
          });
        }

        this.provPick.forEach((v, k) => {
          if (v == this.province) {
            this.setData({
              pindex: k
            });
          }
        });
        this.cityArray[this.pindex].citylist.forEach(v => {
          clist.push(v.cityname);
        });
        this.setData({
          // cityPick: this.data.cityPick.concat(clist)
          cityPick: clist
        });
        this.cityPick.forEach((v, k) => {
          if (v == this.city) {
            this.setData({
              cindex: k
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData();

        if (this.citylist != "" && Array.isArray(this.citylist)) {
          // 获取定位
          this.getLocation();
        }
      });
    },

    // 获取数据
    getInfoData(citycode) {
      let data = {
        action: 'xiaoqu',
        citycode: citycode ? citycode : this.citycode
      };
      util.request('zhuanti.php', data).then(res => {
        if (res.data.data.daofen) {
          res.data.data.daofen.content = res.data.data.daofen.content.replace(/<p([\s\w"=\/\.:;]+)((?:(="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p').replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p').replace(/<p>/ig, '<p class="p_class">').replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1').replace(/<img/gi, '<img style="width:100%;height:auto"'); // .replace(/<span>/ig, '<p class="p_class">')
        }

        uni.setNavigationBarTitle({
          title: res.data.data ? res.data.data.title : "新冠肺炎患者分布小区查询"
        }); // 处理区域选择

        let quData = res.data.data.qu;

        if (quData) {
          let qlist = [];
          quData.forEach(v => {
            qlist.push(v.cityname);
          });
          this.setData({
            quPick: this.quPick.concat(qlist),
            quData
          });
        } // 处理城市经纬度


        if (res.data.data.jwd != '') {
          let city_jd = res.data.data.jwd.city_jd;
          let city_wd = res.data.data.jwd.city_wd;
          let jwdData = util.bMapTransQQMap(city_jd, city_wd);
          this.setData({
            longitude: jwdData.lng,
            latitude: jwdData.lat
          });
        } // 处理地图上标记点


        let marketData = res.data.data.xqname;
        let marketInfo = res.data.data.xqname.splice(0, 40);

        if (marketInfo) {
          marketInfo.forEach((v, k) => {
            if (v.location) {
              v.location.lng = util.bMapTransQQMap(v.location.lng, v.location.lat).lng;
              v.location.lat = util.bMapTransQQMap(v.location.lng, v.location.lat).lat;
              this.markers.push({
                id: k,
                longitude: v.location.lng,
                latitude: v.location.lat,
                iconPath: "/static/images/dwl.png",
                label: {
                  content: v.address,
                  bgColor: "#fff",
                  fontSize: '20rpx',
                  padding: "10rpx",
                  borderColor: "#232E7D",
                  borderWidth: "1rpx",
                  borderRadius: "10rpx",
                  textAlign: 'center',
                  color: "#ff0000"
                }
              });
              this.setData({
                markers: this.markers
              });
            }
          });
        } // 处理确定病例区域


        if (res.data.data.xiaoqu != '') {
          res.data.data.xiaoqu.forEach((v, k) => {
            v.quClick = false;
          });
        }

        this.setData({
          infoData: res.data.data,
          realTimeData: res.data.data.xinzeng ? res.data.data.xinzeng : '',
          // latitude:
          marketData,
          guijiData: res.data.data.guiji ? res.data.data.guiji : '',
          updateTime: util.timestamp(res.data.data.update_at, 'Y-M-D h')
        });

        if (this.realTimeData.length > 2) {
          this.setData({
            showReal: true
          });
        }

        if (this.guijiData.length > 2) {
          this.setData({
            showGuiji: true
          });
        }
      });
    },

    // 搜索区域
    searchData(value) {
      let searchRes = []; // let quCont = [];

      searchRes = this.marketData.filter(v => {
        if (v.address.includes(value) || v.qu.includes(value)) {
          return v;
        }
      });
      this.setData({
        searchRes
      });

      if (searchRes != '') {
        searchRes.forEach((v, k) => {
          if (v.location) {
            v.location.lng = util.bMapTransQQMap(v.location.lng, v.location.lat).lng;
            v.location.lat = util.bMapTransQQMap(v.location.lng, v.location.lat).lat;
            this.resMarkers.push({
              id: k,
              longitude: v.location.lng,
              latitude: v.location.lat,
              iconPath: "/static/images/dwl.png",
              label: {
                content: v.address,
                bgColor: "#fff",
                fontSize: '20rpx',
                padding: "10rpx",
                borderColor: "#232E7D",
                borderWidth: "1rpx",
                borderRadius: "10rpx",
                textAlign: 'center',
                color: "#ff0000"
              }
            });
            this.setData({
              resMarkers: this.resMarkers
            });
          }
        });
        let tempArr = [];
        let quCont = [];

        for (let i = 0; i < searchRes.length; i++) {
          if (tempArr.indexOf(searchRes[i].qu) === -1) {
            quCont.push({
              qu: searchRes[i].qu,
              xq: [searchRes[i]],
              quClick: true
            });
            tempArr.push(searchRes[i].qu);
          } else {
            for (let j = 0; j < quCont.length; j++) {
              if (quCont[j].qu == searchRes[i].qu) {
                quCont[j].xq.push(searchRes[i]);
                break;
              }
            }
          }
        }

        this.setData({
          quCont
        });
      }
    },

    // 省份选择
    bindProv: function (e) {
      this.setData({
        pindex: e.detail.value,
        cindex: 0,
        qindex: 0,
        quPick: ["全市"] // cityPick: ["选择城市"],

      });
      let clist = [];
      this.cityArray[this.pindex].citylist.forEach(v => {
        clist.push(v.cityname);
      });
      this.setData({
        // cityPick: this.data.cityPick.concat(clist),
        cityPick: clist
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        }); // 获取城市公众号二维码

        this.getQrcode(this.citycode);
        this.getInfoData(this.citycode);
      }
    },

    // 城市选择
    bindCity(e) {
      this.setData({
        cindex: e.detail.value
      });
      let cityname = this.cityPick[this.cindex];

      if (this.citylist) {
        this.citylist.forEach(v => {
          if (v.cityname == cityname) {
            let citycode = v.citycode;
            this.setData({
              citycode,
              city: cityname
            });
          }
        });
      } // 获取城市公众号二维码


      this.getQrcode(this.citycode);
      this.getInfoData(this.citycode);
    },

    // 区域选择
    bindQu(e) {
      this.setData({
        qindex: e.detail.value,
        showNomal: false
      });
      let quname = this.quPick[this.qindex];

      if (quname != "全市") {
        this.searchData(quname);
      } else {
        this.setData({
          showNomal: true
        });
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    },

    // 搜索输入事件
    inputQu(e) {
      let quValue = e.detail.value;
      this.setData({
        quValue
      });

      if (this.quValue == "") {
        this.setData({
          showNomal: true
        });
      }
    },

    // 搜索区域
    searchQu(e) {
      let quValue = e.detail.value;
      this.setData({
        quValue,
        showNomal: false
      });

      if (this.quValue != "") {
        this.searchData(quValue);
      } else {
        this.setData({
          showNomal: true
        });
      }
    },

    // 查询按钮
    searchBtn() {
      this.setData({
        showNomal: false
      });

      if (this.quValue != "") {
        this.searchData(this.quValue);
      } else {
        this.setData({
          showNomal: true
        });
      } // this.searchData(this.data.quValue)

    },

    // 全市内容展示点击
    bindClick(e) {
      let flag = e.currentTarget.dataset.flag;

      if (flag == 1) {
        this.setData({
          showTitle1: true,
          showTitle2: false
        });
      } else if (flag == 2) {
        this.setData({
          showTitle1: false,
          showTitle2: true
        });
      }
    },

    // 实时新增跳转、病例轨迹跳转、门诊跳转、确诊区域跳转
    navDeatil(e) {
      let id = e.currentTarget.dataset.id;
      let citycode = e.currentTarget.dataset.citycode;
      let url = e.currentTarget.dataset.url;
      let type = e.currentTarget.dataset.type;
      let title = e.currentTarget.dataset.title;

      if (id != 0) {
        uni.navigateTo({
          url: '/pages/article/detail/detail?id=' + id + '&type=' + type + '&city=' + citycode
        });
      } else {
        this.setData({
          showtk: true
        });
        util.navContact(title, url);
      }
    },

    // 确诊病例区域点击
    quClickBtn(e) {
      let quname = e.currentTarget.dataset.quname;
      let flag = e.currentTarget.dataset.flag;

      if (flag == 1) {
        this.infoData.xiaoqu.forEach((v, k) => {
          if (v.quname == quname) {
            v.quClick = !v.quClick;
          }
        });
        this.setData({
          infoData: this.infoData
        });
      } else {
        this.quCont.forEach((v, k) => {
          if (v.qu == quname) {
            v.quClick = !v.quClick;
          }
        });
        this.setData({
          quCont: this.quCont
        });
      }
    },

    // 查看更多
    seemoreBtn(e) {
      let flag = e.currentTarget.dataset.flag;

      if (flag == 1) {
        this.setData({
          showReal: false
        });
      } else if (flag == 2) {
        this.setData({
          showGuiji: false
        });
      }
    },

    /**
     * 页面滑动事件的处理函数
     */
    onPageScroll: function (e) {
      this.setData({
        showNav: false
      });
    }
  }
};
</script>
<style>
/* pages/topicality/xiaofeiquan/xiaofeiquan.wxss */
.main-img{width: 100%;height: 276rpx;}
.city-box{background: #ffffff;border-radius: 35rpx;padding: 10rpx 30rpx;position: absolute;
top: 40rpx;right: 30rpx;}
.city-box text{font-size: 30rpx;font-weight: bolder;}
.city-box image{width: 23rpx;height: 15rpx;margin-left: 10rpx;}
.change-city{background:rgba(255,255,255,1);box-shadow:0rpx 6rpx 6rpx rgba(0,0,0,0.16);
opacity:1;border-radius:20rpx;padding:30rpx 0rpx;position: absolute;top:235rpx;width: 90%;
margin-left: 36rpx;}
.change-city text{font-size:28rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(20,20,20,1);opacity:1;text-align: center;white-space:nowrap;width: 130rpx;}
.sel-city{display: flex;align-items: center;margin-left:0rpx;text-align: center;}
.sel-city image{width: 19rpx;height: 10rpx;}
/* .picker{width: 90rpx;text-align: center;} */
.picker{font-size:28rpx;font-family:PingFang SC;font-weight:bold;line-height:36rpx;
color:rgba(20,20,20,1);opacity:1;text-align: center;white-space:nowrap;width: 140rpx;}
.search{display: flex;align-items: center;margin: 30rpx 50rpx 20rpx 30rpx;}
.search-box{background:rgba(238,238,238,1);opacity:1;border-radius:28rpx;padding: 8rpx 30rpx;flex: 1}
.search-box input{font-size: 25rpx;font-family:PingFang SC;font-weight:500;line-height:32rpx;}
.chaxun{background:rgba(81,149,221,1);border-radius:28rpx;margin-left: 20rpx;
font-size:25rpx;font-family:PingFang SC;font-weight:500;line-height:32rpx;
color:rgba(255,255,255,1);opacity:1;padding: 10rpx 30rpx;}
.renew{font-size:22rpx;font-family:PingFang SC;font-weight:300;line-height:26rpx;
color:rgba(184,184,184,1);opacity:1;float:right;margin-right: 50rpx;}

.yq-content{margin: 230rpx 36rpx 30rpx 36rpx;}
.fb-title{border: 5rpx solid #5195DD;display: flex;align-items: center;justify-content:space-between;
border-radius: 20rpx;}
/* 标题 */
.titleSel1{border-radius: 20rpx 0 0 20rpx;background-color: #E5EFFA;font-size:24rpx;
font-family:PingFang SC;font-weight:600;line-height:34rpx;text-align: center;white-space:nowrap;   
color:rgba(81,149,221,1);opacity:1;padding: 20rpx 56rpx;}
.titleSel2{border-radius: 0 20rpx 20rpx 0;background-color: #E5EFFA;font-size:24rpx;
font-family:PingFang SC;font-weight:600;line-height:34rpx;text-align: center;white-space:nowrap;   
color:rgba(81,149,221,1);opacity:1;padding: 20rpx 60rpx;}
.titleNor1{border-radius: 20rpx 0 0 20rpx;background-color: #fff;font-size:24rpx;
font-family:PingFang SC;font-weight:600;line-height:34rpx;text-align: center;white-space:nowrap;   
color:#4E4E4E;opacity:1;padding: 20rpx 56rpx;}
.titleNor2{border-radius: 0 20rpx 20rpx 0;background-color: #fff;font-size:24rpx;
font-family:PingFang SC;font-weight:600;line-height:34rpx;text-align: center;white-space:nowrap;   
color:#4E4E4E;opacity:1;padding: 20rpx 60rpx;}

/* 地图 */
.fb-content1{margin-top:42rpx;}
.mapstyle{width: 100%;height: 347rpx;}
.menzhen{background-color: #5395Ed;border-radius: 20rpx;padding:20rpx 30rpx;text-align: center;font-size: 28rpx;color: #fff;font-weight: 500;margin-top: 30rpx;}
.main-content{margin-top: 30rpx;}
.sstext{font-size:30rpx;font-family:PingFang SC;font-weight:600;
line-height:40rpx;color:rgba(20,20,20,1);opacity:1;}
.realtime-box{margin: 30rpx 0;}
.realShow:nth-of-type(n+3){display: none;}
.real-box{display: flex;align-items: center;}
.real-box image{width: 30rpx;height: 30rpx;}
.real-box text{font-size:22rpx;font-family:PingFang SC;font-weight:500;margin-left: 32rpx;
line-height:32rpx;color:rgba(152,150,150,1);opacity:1;}
.real-box2{display: flex;align-items: center;}
.real-box2 image{width: 2rpx;height: 180rpx;margin-left: 14rpx;}
.cont-text{background:rgba(246,246,246,1);opacity:1;border-radius:12rpx;padding: 26rpx 30rpx;
font-size:28rpx;font-family:PingFang SC;font-weight:500;line-height:40rpx;flex: 1;
color:rgba(61,61,61,1);margin-left: 47rpx;}

/* 区域分布图 */
.fb-content2{margin-top:42rpx;}
.lunbo{width: 100%;height: 480rpx;}
.xiaoqu-box{margin-bottom: 10rpx;}
.qu-box{display: flex;align-items: center;justify-content: space-between;}
.qu-text{font-size:30rpx;font-family:PingFang SC;font-weight:600;color: #000;}
.qu-sel{display: flex;align-items: center;}
.qu-sel image{width:60rpx;height: 60rpx;}
.qu-sel text{font-size:30rpx;font-family:PingFang SC;font-weight:500;color: #9a9a9a;margin-right: 10rpx;}
.qu-item-box{background:rgba(242,244,252,1);opacity:1;border-radius:20rpx;padding: 30rpx;
margin-top: 30rpx;}
.qu-item{display: flex;align-items: center;justify-content: space-between;margin-bottom: 10rpx;}
.qu-item text{font-size:30rpx;font-family:PingFang SC;font-weight:500;color: #000;}
.qu-item image{width: 20rpx;height: 30rpx;}

/* 搜索结果 */
.result-box{margin-top:42rpx;}
.nores{text-align: center;font-size: 30rpx;color: #999999;font-weight:500;margin-top: 30rpx;}

/* 导粉 */
.daofen{margin-bottom:80rpx;text-align: center;}
.p_class{margin:10rpx 30rpx;line-height: 50rpx;}

/* 查看更多 */
.see-more{display: flex;justify-content: center;margin: 30rpx 0;}
.see-more view{background-color: #EEEEEE;padding: 20rpx 40rpx;font-size:26rpx;border-radius:12rpx;
font-family:PingFang SC;font-weight:600;color: #141414;text-align: center;width: 200rpx;white-space:nowrap;}

</style>